<template>
    <transition name="move">
        <div class="artsDiscuss" v-show="artsDiscussFlag">
            <mTitle :title="title" :returnShow="returnShow" @clickHide="hide"></mTitle>
            <div class="arts-discuss-container">
                <div class="discuss-text">
                    <textarea class="discuss-textarea" v-model="textareaVal" placeholder="说点什么吧..."></textarea>
                </div>
            </div>
            <div class="detail-btn">
                <div class="detail-btn-item" @click="hide">返回</div>
                <div class="detail-btn-item love-btn" @click="discussForm">发表</div>
            </div>
        </div>
    </transition>
</template>

<script>
    import axios from 'axios'
    import mTitle from 'base/title/title'
    import { Toast } from 'vant'
    import { Dialog } from 'vant'

    export default {
        props: {
            reviewIndex: {
                type: String
            }
        },
        data () {
            return {
                title: "发表评论",
                returnShow: true,
                artsDiscussFlag: false,
                textareaVal: "",
                pid: ""
            }
        },
        methods: {
            show () {
                this.artsDiscussFlag = true
            },
            hide () {
                this.artsDiscussFlag = false
                this.textareaVal = ""
            },
            // 发表
            discussForm () {
                if (this.textareaVal === "") {
                    Toast('评论不能为空')
                    return
                }
                // 数据提交
                axios.post('/api/index.php?g=Api&m=Ucenter&a=addaliuyan', {
                    openid: localStorage.getItem("openid"),
                    mid: localStorage.getItem("memberid"),
                    content: this.textareaVal,
                    actid: this.$route.params.id,
                    pid: this.pid
                }).then((res) => {
                    console.log(res)
                    if (res.data.rescode=='0000') {
                        Dialog.alert({
                          message: '留言成功，审核通过之后方可显示！'
                        }).then(() => {
                            Dialog.close()
                            this.$emit('submitBtn', this.textareaVal)
                            this.hide()
                        })     
                    }
                }).catch(function (error) {

                })
            }
        },
        components: {mTitle},
        watch: {
            reviewIndex (newVal) {
                this.pid = newVal
            }
        },
        created () {
        }
    }
</script>

<style lang="stylus">
    .artsDiscuss
        width: 100%
        height: 100%
        position: fixed
        top: 0
        left: 0
        z-index: 99
        bottom: 0
        overflow: hidden
        background: #fff
        transition: all .2s linear
        &.move-enter,&.move-leave-to
            transform: translate3d(100%,0,0)
        .arts-discuss-container
            position: absolute
            width: 100%
            top: 44px
            bottom: 0
            .discuss-text
                width: 100%
                padding: 0 15px
                box-sizing: border-box
                .discuss-textarea
                    width: 100%
                    height: 140px
                    line-height: 150%
                    border: 1px solid #eee
                    border-radius: 6px
                    padding: 10px 6px
                    box-sizing: border-box
        .detail-btn
            position: absolute
            bottom: 40px
            height: 40px
            font-size: 0
            width: 100%
            .detail-btn-item
                width: 40%
                background: #aaaaaa
                height: 38px
                display: inline-block
                font-size: 16px
                margin-left: 7%
                line-height: 38px
                text-align: center
                color: #fff
                border-radius: 20px
                &.love-btn
                    background:  #f8624a
</style>